<template>
  <div id="app">
    <mt-header title="企业详情">
      <router-link to="/index" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
      <div class="floor-divider company-border-both ng-scope"></div>
      <section class="company-info ng-scope">
        <div class="company-logo">
          <img src="../../img/default.jpg">
        </div>
        <div class="company-intro">
          <div class="company-name">济南伊利乳业有限责任公司</div>
          <div class="company-detail"> <span class="ng-binding">许可证号：SC10537012400189</span></div>
          <div class="company-detail"> <span class="ng-binding">法定代表人：孙东宏</span></div>
          <div class="company-detail"> <span class="ng-binding">企业地址：平阴县济西工业园区</span></div>
          <div class="company-detail"> <span class="ng-binding">发证机关：山东省食品药品监督管理局</span></div>
          <div class="company-detail"> <span class="ng-binding">有效期限：2016年08月11日至2021年08月10日</span></div>
          <!-- <a href="/preview.html">样本预览</a> --></div>
      </section>
      <div class="floor-divider company-border-both ng-scope"></div>
      <section>
        <mt-navbar v-model="selected">
          <mt-tab-item id='tab-container1'>
            <font class="font_1">透明工厂</font>
          </mt-tab-item>
          <mt-tab-item id='tab-container2'>
            <font class="font_1">宣传视频</font>
          </mt-tab-item>
        </mt-navbar>
        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="selected" swipeable>
            <mt-tab-container-item id="tab-container1">
              <!-- 公告栏目 -->
              <mt-videolist></mt-videolist>
            </mt-tab-container-item>
            <mt-tab-container-item id="tab-container2">
              <!-- 资质证明 -->
           2
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
  
      </section>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
   import Video from '@/components/videolist'
  import {
    Header
  } from 'mint-ui';
  import {
    TabContainer,
    TabContainerItem,
    Navbar,
    TabItem,
  } from 'mint-ui';
  export default {
    components: {
       'mt-videolist': Video,
      "mt-header": Header,
      'mt-tab-container': TabContainer,
      'mt-tab-container-item': TabContainerItem,
      'mt-navbar': Navbar,
      'mt-tab-item': TabItem,
    },
    data() {
      return {
        seachtext: '',
        selected: 'tab-container1',
  
      };
    },
  
    //方法
    methods: {
      seach: function() {
        alert()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .mint-header {
    background: #43464f;
  }
  
  .floor-divider {
    height: 12px;
    background: #f5f5f5;
  }
  
  .company-border-both {
    border-top: 1px solid #d9e0e2;
    border-bottom: 1px solid #d9e0e2;
  }
  
  
  /**/
  
  .company-info {
    overflow: hidden;
    clear: both;
    color: #666;
    padding: 12px 0 10px 15px;
  }
  
  .company-logo {
    float: left;
    width: 40px;
    height: 40px;
    border: 1px solid #d9e0e2;
  }
  
  .company-intro {
    margin-left: 55px;
    overflow: hidden;
  }
  
  .company-detail {
    padding: 5px 0px;
  }
  
  .company-name {
    color: #333;
    font-size: 1rem;
    display: inline-block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .company-detail span {
    color: #9a9a9a;
  }

  /**/
  .mint-navbar .mint-tab-item.is-selected{
    color:#618dbe
  }
  .mint-navbar .mint-tab-item{
    padding: 15px 30px;
  }
  .mint-navbar .mint-tab-item.is-selected{
        border-bottom:3px solid #618dbe;
        color: #618dbe;
            font-weight: bold;
  }
  .mint-tab-item{
    -webkit-box-flex:initial;
     flex:initial
  }
.mint-navbar{
  border-bottom:1px solid #f1f0f0
}
</style>
